<template>
  <div>
    <!--详情菜单-->
    <el-card>
      <div slot='header'>
        <span>个人中心</span>
      </div>
      <el-menu router text-color='#999999' active-text-color='#00c3ff' :default-active='$route.path'
               class='el-menu-vertical-demo' @open='handleOpen' @close='handleClose'>
        <el-menu-item index='/center/article'>
          <i class='el-icon-document'></i>
          <span>我的云N记</span>
        </el-menu-item>
        <el-menu-item index='/center/comment'>
          <font-awesome-icon :icon="['far', 'comment-dots']" class='el-icon-document'></font-awesome-icon>
          <span>我的评论</span>
        </el-menu-item>
        <el-menu-item index='/center/collection'>
          <i class='el-icon-star-off'></i>
          <span>我的搜藏</span>
        </el-menu-item>
        <el-menu-item index='/center/fans'>
          <svg-icon icon-class='fans' class='el-icon-document' />
          <span>我的粉丝</span>
        </el-menu-item>
        <el-menu-item index='/center/like'>
          <font-awesome-icon :icon="['far', 'heart']" class='el-icon-document'></font-awesome-icon>
          <span>我的关注</span>
        </el-menu-item>
        <el-menu-item index='/center/lv'>
          <svg-icon icon-class='LV' class='el-icon-document' />
          <span>我的等级</span>
        </el-menu-item>
        <el-menu-item index='/center/coins'>
          <svg-icon icon-class='coins' class='el-icon-document' />
          <span>我的云N币</span>
        </el-menu-item>
        <el-menu-item index='/center/auth'>
          <svg-icon icon-class='authentication' class='el-icon-document' />
          <span>认证中心</span>
        </el-menu-item>
        <el-menu-item index='/center/setting'>
          <i class='el-icon-setting'></i>
          <span>设置中心</span>
        </el-menu-item>
        <el-menu-item index='/center/myinfo'>
          <font-awesome-icon :icon="['far', 'edit']" class='el-icon-document'></font-awesome-icon>
          <span>编辑资料</span>
        </el-menu-item>
        <el-menu-item index='/logout' @click='logout()'>
          <svg-icon icon-class='logout' class='el-icon-document' />
          <span>退出登录</span>
        </el-menu-item>
      </el-menu>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  created () {
  },
  // DOM对象加载完成时
  mounted () {
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    logout () {
      this.$memory.clearToken()
      this.$router.push({ name: 'index' })
    }
  },
  computed: {},
  name: 'userCenterMenu'
}
</script>

<style lang='less' scoped>
.el-menu {
  border-right: none;
}

.svg-icon {
  width: 24px !important;
  color: #999999;
}
</style>
